<template>
	<view class="page">
		<navbar title="本轮排行" />
		<!-- <view class="title">联机模式</view> -->
		<view class="rank">
			<view class="rank-bg">
				<view class="rank-title">
					<view class="rt1">排名</view>
					<view class="rt2">选手信息</view>
					<view class="rt3">获得积分</view>
				</view>
				<view class="rank-item" v-for="(item,index) in list" :key="index">
					<view class="index" :class="index === 0 ? 'index0' : ''">{{index+1}}</view>
					<view class="rank-main">
						<image class="avatar" src="../../../static/image/fjj/avatar.png"></image>
						<view class="con">
							<view class="username">
								{{item.username}}
							</view>
							<view class="num">
								正确单词：{{item.yes_num}}个
							</view>
						</view>
					</view>
					<view class="score">
						+{{item.score}}
					</view>
				</view>
			</view>
		</view>

		<!-- #ifdef APP-PLUS -->
		<view class="btn" @click="fnSure('app')">确定</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="btn" @click="fnSure('h5')">确定</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import navbar from '../../../components/gamesNav.vue'
	export default {
		config: {
			disableScroll: true
		},
		components: {
			navbar
		},
		data() {
			return {
				game_mode: '',
				group_id: '',
				list: []
			};
		},
		onLoad(options) {
			var that = this;
			that.group_id = options.group_id;
			that.game_mode = options.game_mode;
			that.getRankList();
		},
		mounted() {
			const that = this
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'rank'
			})
		},
		onShow() {
			const that = this
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'rank'
			})
		},
		methods: {
			fnSure(type) {
				var that = this;
				console.log('type===', type)
				if (type == 'app') {
					uni.navigateBack({
						delta: 1
					});
				}
				if (type == 'h5') {
					uni.reLaunch({
						url: '/pages/games/index',
					});
				}
			},

			// 获取排行榜列表1
			getRankList() {
				var that = this;
				that.$http.getRankList({
					'group_id': that.group_id,
					'game_mode': that.game_mode
				}).then(res => {
					console.log('1*******1')
					console.log(res)
					if (res.code === 200) {
						that.list = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: '',
							duration: 2000
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.page {
		height: 100vh;
		background: #161001;
		overflow-y: auto;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.title {
		font-family: hzgb;
		font-size: 18px;
		color: #fff;
		background: linear-gradient(to bottom, #000, #373632);
		text-align: center;
		height: 44px;
		line-height: 44px;
	}

	.rank {
		background: linear-gradient(to right, #fff497, #ffd16b);
		border-radius: 16px;
		margin: 24px 12px;
	}

	.rank-bg {
		background-image: url(../../../static/image/homePage/diwen1.png);
		background-size: 100% auto;
		background-repeat: repeat-y;
		border-radius: 16px;
		padding: 0 20px;
	}

	.rank-title {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		font-size: 14px;
		font-family: hzgb;
		height: 32px;

		// padding: 0 12px;
		.rt1 {
			width: 48px;
			text-align: center;
		}

		.rt2 {
			flex: 1;
			padding-left: 20px;
		}

		.rt3 {
			width: 60px;
			text-align: center;
		}
	}

	.rank-item {
		padding: 10px 0;
		border-top: 2px solid #000;
		display: flex;
		align-items: center;

		.index {
			width: 48px;
			height: 48px;
			background-image: url(../../../static/image/fjj/rank.png);
			background-size: contain;
			font-size: 26px;
			font-family: hzgb;
			color: #fff;
			text-align: center;
			line-height: 40px;
		}

		.index0 {
			background-image: url(../../../static/image/fjj/rank1.png);
			color: #ffd16b;
		}

		.score {
			width: 60px;
			text-align: center;
			font-size: 24px;
			font-family: hzgb;
		}
	}

	.rank-main {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 20px;

		.avatar {
			width: 50px;
			height: 50px;
			border-radius: 56px;
			margin-right: 10px;
		}

		.username {
			color: #000;
			font-size: 18px;
			font-family: hzgb;
			margin-bottom: 4px;
			padding-left: 12px;
		}

		.num {
			width: 110px;
			background: linear-gradient(to bottom, #130e00, #373632);
			height: 24px;
			line-height: 24px;
			border-radius: 24px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			margin-top: 6px;
		}
	}

	.btn {
		width: 130px;
		height: 40px;
		line-height: 40px;
		box-shadow: 0 6px 0 0 #d9b059;
		background: linear-gradient(to top, #fff497, #ffd16b);
		border-radius: 40px;
		margin: 40px auto;
		text-align: center;
		font-family: hzgb;
		font-size: 16px;
	}
</style>